<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <p id="box1">段落内容1</p>
        <p id="box2">段落内容2</p>
        <p id="box3">段落内容3</p>
    </div>


</body>
<script>
    var div=document.getElementById('main');
    var div1=document.createElement('div');
    var txt = document.createTextNode('123');
    var txt1 = document.createTextNode('123');
    // appendChild 在末尾添加,所以内容会拼接到一起
    div1.appendChild(txt);
    div1.appendChild(txt1);
    div.appendChild(div1);

    // 在指定元素前插入
    // 第一个参数:指定元素;  第二个参数:要插入的内容
    // 这两个参数都需要获取元素对象
    div.insertBefore(div1,document.getElementById('box2'));

    // 替换执行元素
    div.replaceChild(div1,document.getElementById('box3'));

    // 删除指定元素
    div.removeChild(document.getElementById('box1'));

    //复制(克隆/拷贝)
    //深拷贝true:拷贝自己和自己的子元素
    //浅拷贝false:只拷贝自己,不拷贝子元素
    //不传参数默认为浅拷贝
    var div11=div.cloneNode(true);
    document.body.appendChild(div11);
</script>
</html>